<template>
<div class="flex-container function-type-block">
  <el-select class="item-type" v-model="functionData.type" @change="typeChange">
    <template v-for="(item, index) in typeList">
      <el-option v-if="!disableTypes.includes(item.value)" :key="index" :label="item.label" :value="item.value"></el-option>
    </template>
  </el-select>
  <div class="sub-item">
    <el-input v-if="functionData.type===0 || functionData.type===78" v-model="functionData.type_val" placeholder="请输入" maxLength="400" @blur="checkUrlVal" @input="customLink"></el-input>
    <el-input v-else-if="functionData.type===50 || functionData.type===51" v-model="functionData.type_val" placeholder="小程序路径" maxLength="400"></el-input>
    <el-input v-else disabled v-model="functionData.subtitle"></el-input>
  </div>
  <el-button v-if="functionData.type!==0 && functionData.type!==50 && functionData.type!==51 && functionData.type!==78&& functionData.type!==36&& functionData.type!==37" type="text" @click="chooseJump">选择</el-button>
</div>

</template>
<script>
export default {
  name: 'FunctionType',
  props: {
    itemData: { // 初始type
      type: Object,
      default() {
        return {
          type: 0
        }
      }
    },
    disableTypes: { // 不显示的types
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      typeList: [
        { value: 0, label: '自定义链接' },
        { value: 1, label: '商品' },
        { value: 2, label: '套餐' },
        { value: 201, label: '组合套餐' },
        { value: 5, label: '活动' },
        { value: 33, label: '箱起活动' },
        { value: 34, label: '箱起礼包' },
        { value: 50, label: '碧选小程序' },
        { value: 51, label: '碧选直播小程序' },
        { value: 77, label: '优惠券' },
        { value: 78, label: '视频地址' },
        { value: 88, label: '碧划算' },
        { value: 35, label: '箱起商品' },
        { value: 36, label: '箱起首页' },
        { value: 37, label: '我的箱起' },

        { value: 38, label: '碧选首页' },
        { value: 39, label: '签到' },
        { value: 40, label: '我的好友' },
        { value: 41, label: '会员中心' },
        { value: 42, label: 'VIP支付页' },
        { value: 43, label: '钻石支付页' },
      ],
      functionData: this.itemData
    }
  },
  watch: {
    // itemData() {
    //   this.functionData = this.itemData
    // },
    itemData: {
      handler(){
        this.functionData = this.itemData
      },
      deep:true
    }
  },
  methods: {
    customLink(e) {
      this.$emit('custom_link', e)
    },
    checkUrlVal(e) {
      var pa=/^(?:(?!.*invite_code).*)/
      if (!pa.test(this.functionData.type_val)) {
        this.functionData.type_val = ''
      }
    },
    chooseJump(){
      if(this.functionData.type === 1){
        let checkData = this.functionData.type_val ? [{
          goodsId: this.functionData.type_val,
          name: this.functionData.subtitle
        }] : [];
        this.goodsChoose({ count: 1 }, checkData).then(val => {
          this.functionData.type_val = val[0].goodsId;
          this.functionData.subtitle = val[0].name;
          this.dataChange()
        });
        return false;
      } else if(this.functionData.type === 2){
        let checkData = this.functionData.type_val ? [{
          packageId: this.functionData.type_val,
          name: this.functionData.subtitle,
          type: this.functionData.pack_type
        }] : [];
        this.packageChoose({ count: 1 }, checkData).then(val => {
          this.functionData.type_val = val[0].packageId;
          this.functionData.subtitle = val[0].name;
          this.functionData.pack_type = val[0].type;
          this.dataChange()
        });
        return false;
      } else if(this.functionData.type === 5){
        let checkData = this.functionData.type_val ? [{
          activityId: this.functionData.type_val,
          name: this.functionData.subtitle
        }] : [];
        this.activityChoose({ count: 1 }, checkData).then(val => {
          this.functionData.type_val = val[0].activityId;
          this.functionData.subtitle = val[0].name;
          this.dataChange()
        });
        return false;
      } else if(this.functionData.type === 77){
        let checkData = this.functionData.type_val ? [{
          couponActivityId: this.functionData.type_val,
          name: this.functionData.subtitle
        }] : [];
        this.couponChoose({ count: 1 }, checkData).then(val => {
          this.functionData.type_val = val[0].couponActivityId;
          this.functionData.subtitle = val[0].name;
          this.dataChange()
        });
        return false;
      } else if(this.functionData.type === 33) {
          let checkData = this.functionData.type_val ? [{
          seriesId: this.functionData.type_val,
          seriesName: this.functionData.subtitle,
          boxGoodsDTOS: this.functionData.boxGoodsDTOS,
          isSell: this.functionData.isSell,
          upshelf: this.functionData.isSell,
          continuePiece: this.functionData.continuePiece,
          firstPiece: this.functionData.firstPiece
        }] : []
        this.boxSeries(checkData, 1, 0).then(val => {
          this.functionData.type_val = val[0].seriesId
          this.functionData.subtitle = val[0].seriesName
          this.functionData.boxGoodsDTOS = val[0].boxGoodsDTOS
          this.functionData.isSell = val[0].isSell
          this.functionData.upshelf = val[0].upshelf,
          this.functionData.continuePiece = val[0].continuePiece
          this.functionData.firstPiece = val[0].firstPiece
          this.dataChange()
        })
        return false;
      } else if(this.functionData.type === 34) {
        let checkData = this.functionData.type_val ? [{
          bonusGiftId: this.functionData.type_val,
          name: this.functionData.subtitle,
          configStatus: this.functionData.configStatus,
          startTime: this.functionData.startTime,
          endTime: this.functionData.endTime
        }] : []
        this.boxPackageGet(checkData, 1).then(val => {
          this.functionData.type_val = val[0].bonusGiftId
          this.functionData.subtitle = val[0].name
          this.functionData.configStatus = val[0].configStatus
          this.functionData.startTime = val[0].startTime
          this.functionData.endTime = val[0].endTime
          this.dataChange()
        })
        return false;
      } else if (this.functionData.type === 88) {
        let checkData = [{
          goodsId :this.functionData.type_val
        }]
        this.bhsGoodsChoose(1, checkData, false).then(val => {
          this.functionData.plateform = 'ALI'
          this.functionData.type_val = val[0].goodsId
          this.functionData.subtitle = val[0].title
          this.functionData.startTime = val[0].couponUseStartTime
          this.functionData.endTime = val[0].couponUseEndTime
          this.dataChange()
        })
      } else if(this.functionData.type === 201) {
        let checkData = this.functionData.type_val ? [{
          comboId: this.functionData.type_val,
          name: this.functionData.subtitle
        }] : []
        this.comboPackageChoose(checkData, 1).then(val => {
          this.functionData.type_val = val[0].comboId
          this.functionData.subtitle = val[0].name
          this.dataChange()
        });
        return false;
      }else if(this.functionData.type === 35){
        let selected = this.functionData.id?[
          {
            id: this.functionData.id,
            boxId:this.functionData.boxId,
            goodsId: this.functionData.goodsId,
            image: this.functionData.pic,
            name: this.functionData.subtitle,
            subTitle: this.functionData.subName,
            marketPrice: this.functionData.marketValue,
            ordinaryPrice: this.functionData.price
          }
        ]:[];
        // console.log(selected);
        this.boxGoodChoose({count:1}, selected).then(data => {
          // console.log(data);
          let item=data[0];
          this.functionData.id=item.id;
          this.functionData.goodsId=item.goodsId;
          this.functionData.boxId=item.boxId;
          // this.functionData.pic=item.image.includes('?x-oss-process=image/resize') ? item.image : item.image + '?x-oss-process=image/resize,m_fill,h_400,w_400';
          this.functionData.subtitle=item.name;
          this.functionData.subName=item.subTitle;
          this.functionData.price=item.ordinaryPrice;
          this.functionData.marketValue=item.marketPrice;
        })
      }
    },
    typeChange(index) {
      this.functionData.type_val = ''
      this.functionData.subtitle = ''
      this.dataChange(index)
    },
    dataChange(index) {
      //多条获取下标
      this.$emit('getIndex')
      this.$emit('dataChange', this.functionData, index)
    }
  }
}
</script>
<style lang="scss">
.function-type-block{
  .item-type{
    width: 112px !important;
  }
}
</style>
